<template>
  <div class="md-dt-workPackageInfo">
    <ul>
        <li v-for="(item,index) in goodsList"  :key= "index" class="md-dt-fli">
            <ul class="md-dt-sul">
                <li>
                    物料编号:
                    <p>{{item.id}}</p>
                </li>
                <li>
                    物料名称:
                    <p>{{item.name}}</p>
                </li>
                <li>
                    库存数量:
                    <p>{{item.number}}</p>
                </li>
                <li>
                    分拣数量:
                    <p>{{item.completeNumber}}</p>
                </li>
            </ul>
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "WorkPackageInfo",
  data(){
    return {
        goodsList:[{
            id:'XSDFFS2G4GD',
            name:"垫圈",
            number:2312,
            completeNumber:1562
        },{
            id:'XSDFFS2G4GD',
            name:"垫圈",
            number:2312,
            completeNumber:1562
        },{
            id:'XSDFFS2G4GD',
            name:"垫圈",
            number:2312,
            completeNumber:1562
        }]
    }
  },
  components: {
    
  },
};
</script>
<style scoped>
.md-dt-fli {
    width: 200px;
    height: 130px;
    font-size: 14px;
    float: left;
    margin-right: 10px;
    border: 1px solid #e7e7e7;
}
.md-dt-fli span {
    color: #3375d7;
}
.md-dt-sul {
    overflow: hidden;
}
.md-dt-sul li:nth-of-type(odd) {
    margin-right: 15px;
}
.md-dt-sul li {
    float: left;
    width: 80px;
    height: 60px;
    padding: 5px;
    word-wrap: break-word;
    overflow: auto;
}
.md-dt-sul li p {
    color: #3375d7;
}
</style>